<template>
  <div>
    <div>
      <span>流程：创建-采购需求填表-创建</span>
      <span style="margin-left: 66%;"> <el-button type="primary">提交</el-button></span>
      <span> <el-button type="primary">主要按钮</el-button></span>
    </div>
    <!-- 标签页 -->
    <div>
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;">
          <!-- 流畅表单 -->
          <el-tab-pane label="流程表单" name="first">
            <div style="margin-left:48%;">采购需求填报单</div>
            <div
              style="margin: auto;  width: 85%; margin-top: 20px; border: 1px solid black; ">

              <div>

                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="采购编号:">
                    <el-input v-model="form.name" style="width: 50%;"></el-input>
                    <span>
                      <span>相关项目:</span>
                      <span><el-input v-model="form.name" style="width: 40%;"></el-input></span>
                    </span>
                  </el-form-item>

                  <el-form-item label="申请人:">
                    <el-input v-model="form.name" style="width: 50%;"></el-input>
                    <span>
                      <span>发起部门:</span>
                      <span><el-input v-model="form.name" style="width: 40%;"></el-input></span>
                    </span>
                  </el-form-item>
                  <el-form-item label="创建时间:">
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                        style="width: 108%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                      <el-time-picker placeholder="选择时间" v-model="form.date2"
                        style="width: 87%; margin-left: 2%;"></el-time-picker>
                    </el-col>
                  </el-form-item>

                  <!-- 上传 -->
                  <!-- <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                  </el-form-item> -->

                  <el-form-item label="采购费用:">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                </el-form>
              </div>

              <div>
                <div style="text-align: center; margin-top: 20px;">备注</div>

              </div>
              <div style="text-align: center; margin-top: 20px;">
                <tinymce :width="595" :height="300" v-model="editForm.productOverview" :key="tinymceFlag">
                </tinymce>
              </div>
            </div>
          </el-tab-pane>
          <!-- 流程图 -->
          <el-tab-pane label="流程图" name="second">
            <el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>

import Tinymce from "@/components/Tinymce";
const defaultEditForm = {
  id: null,
  name: null,
  introductionThe: null,
  createTime: null,
  updateTime: null,
};
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  isAsc: false,
  orderByField: "create_time",
};

export default {
  components: { Tinymce },
  data() {
    return {


      // 流程图
      active: 0,

      value: "",
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      isEdit: false,
      total: "",
      tinymceFlag: 1,
      editForm: Object.assign({}, defaultEditForm),
      // rules表单验证
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      listData: [], //数据
      list: Object.assign({}, defaultListQuery),


      currentPage4: 4,

      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, ],



      size: '',
      activeName: 'first',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },

      // 流程图

      active: 0,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log('submit!');
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      next() {
        if (this.active++ > 2) this.active = 0;
      },
  }
};
</script>

<style scoped></style>
